<template>
  <div>
    <el-card v-if="total != 0" shadow="never">
      <el-row>
        <el-col style="font-size: 1.375rem; user-select: none"
          ><span style="color: #409eff">收藏文章数量：</span>{{ total }}篇</el-col
        >
      </el-row>
    </el-card>
    <div style="border: 0px" shadow="never">
      <el-row :gutter="20">
        <el-col
          style="margin-top: 24px"
          :span="8"
          v-bind:key="blog.id"
          v-for="blog in blogs"
        >
          <el-card
            shadow="hover"
            :body-style="{ padding: '0px' }"
            style="margin-top: 20px"
          >
            <div style="position: relative; width: 100%">
              <el-image
                :src="blog.image"
                class="image"
                style="width: 100%; height: 250px; border-radius: 10px; cursor: pointer"
                fit="cover"
              >
              </el-image>
              <span class="overlay-1" @click="pushDetail(blog.postId)"></span>
              <div class="title" style="user-select: none">
                <a
                  :href="'/blog/' + blog.postId"
                  style="font-size: 1.075rem; color: #11181f; text-decoration: none"
                >
                  <span style="color: #fff; font-size: 1.45rem">{{ blog.title }}</span></a
                >
              </div>
            </div>
            <div style="height: 50px; text-align: center">
              <a
                :href="'/blog/' + blog.postId"
                style="font-size: 1.075rem; color: #11181f; text-decoration: none"
              >
                {{ blog.description }}</a
              >
            </div>
            <div
              style="
                margin-top: 40px;
                text-align: center;
                margin-bottom: 10px;
                user-select: none;
              "
            >
              <div>
                <span
                  >收藏时间:<span>{{ blog.createdTime }}</span></span
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-pagination
      v-if="total != 0"
      style="margin-top: 20px"
      class="mpage"
      background
      layout="prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="page"
    />

    <el-card v-if="total == 0" shadow="never" style="text-align: center; border: 0px">
      <p style="font-size: 1.575rem; color: #cbcdda; user-select: none">{{ msg }}</p>
      <el-image
        style="user-select: none"
        src="https://gitee.com/caohonghai8/Images/raw/master/blog/20201204205335.png"
      ></el-image>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blogs: {},
      currentPage: 1,
      total: 0,
      pageSize: 5,
      userId: "",
      uid: "", // 访客ID
      msg: "您当前还没有收藏文章哦，赶紧去收藏一篇吧~",
    };
  },
  methods: {
    page(currentPage) {
      const _this = this;
      _this.$axios
        .get("/collection/getMyLikes/" + _this.userId + "?currentPage=" + currentPage)
        .then((res) => {
          console.log(res);
          if (res.data.data != null) {
            _this.blogs = res.data.data.records;
            _this.currentPage = res.data.data.current;
            _this.total = res.data.data.total;
            _this.pageSize = res.data.data.size;
          }
        });
    },
    pushDetail(blogId) {
      this.$router.push("/blog/" + blogId);
    },
  },
  created() {
    this.userId = this.$route.params.id;
    this.uid = this.$store.getters.getUser.id; // 登入的id
    if (this.uid != this.userId) this.msg = "他还没有收藏文章哦~";
    this.page(1);
  },
};
</script>

<style scoped>
.mpage {
  margin: 0 auto;
  text-align: center;
}
a:hover {
  text-decoration: none;
}
.el-link.is-underline:hover::after {
  text-decoration: none;
  border-bottom: 0px;
}
.overlay-1 {
  width: 100%;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.66);
  position: absolute;
  opacity: 0.3;
  top: 0;
  left: 0;
  border-radius: 10px;
  -webkit-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.title {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  color: #fff;
  font-weight: 900;
  text-align: center;
  font-size: 1.3rem;
  margin-top: 10px;
}
</style>
